<template>
	<div id="WechatDiv">
		<!--<h1>{{msg}}</h1>-->
		<div class="header">
			<div class="bao">
				<span class="mui-icon mui-icon-search sou"></span>
				<input type="text" name="" id="" value="" placeholder="搜索你想购买的商品"/>
			</div>
		</div>
		<div class="tong">
			<div class="left">
				<p class="chaid" @click="add(index)" v-for="(i,index) in arr">{{i}}</p>
				<span class="tiao"></span>
			</div>
			<div class="right">
				<div class="div1">
					<dl v-for="(x,index) in moren">
						<!--{{x.imgs}}-->
						<router-link to="/Xiang">
							<dt><img :src="x.imgs"></dt>
							<dd>{{x.genre}}</dd>
						</router-link>
					</dl>
					
				</div>
			</div>
		</div>
		
	</div>    
</template>

<script>
import $ from 'jquery'
export default {
  name: 'Connect',
  data () {
  	return {
  		arr:[
    	'常州原产地','新鲜水果',"蔬菜豆菇",'肉禽蛋品','粮油调味','乳品酒水','休闲零食','速冻速食','日用清洁'
    ],
   		Arr1:[],
   		Arr2:[],
   		Arr3:[],
   		Arr4:[],
   		Arr5:[],
   		Arr6:[],
   		Arr7:[],
   		Arr8:[],
   		Arr9:[],
   		list:[],
   		moren:[],
  	}
    
  },
  methods:{
  	add:function(index){
//    console.log(index)
      $(".chaid").eq(index).css({ 
      	background:"#fff",
      	color:"red"
      }).siblings("p").css({
      	background:"#eee",
      	color:"#000"
      })
      $(".tiao").animate({"top":4*index + 0.6+"rem"},200)
  	}
  },
created:function(){
		var url='http://www.yanhanbo.top/user/origin.php?names=&imgs=&standard=&genre=&delivery=&price=&type=%E6%89%80%E6%9C%89';
  		var _self=this;
    	$.get(url,function(data){
    	    _self.Arr1 = JSON.parse(data).data.slice(0,4);
    	    _self.Arr2 = JSON.parse(data).data.slice(5,18);
    	    _self.Arr3 = JSON.parse(data).data.slice(19,29);
    	    _self.Arr4 = JSON.parse(data).data.slice(30,62);
    	    _self.Arr5 = JSON.parse(data).data.slice(40,70);
    	    _self.Arr6 = JSON.parse(data).data.slice(144,155);
    	    _self.Arr7 = JSON.parse(data).data.slice(156,164);
    	    _self.Arr8 = JSON.parse(data).data.slice(165,184);
    	    _self.Arr9 = JSON.parse(data).data.slice(75,100);
    	    _self.moren = _self.Arr1;
    	    console.log(_self.moren)
    	    _self.list = [_self.Arr1,_self.Arr2,_self.Arr3,_self.Arr4,_self.Arr5,_self.Arr6,_self.Arr7,_self.Arr8,_self.Arr9]
			console.log(_self.list)
			$(".chaid").click(function(){
				console.log(_self.list[$(this).index()]) 
				 _self.moren = _self.list[$(this).index()];
			})
	})
    	
}
  
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.WechartDiv{
		width: 500px;
		height: 500px;
		border: red 1px solid;
		margin: 0 auto;
	}
	h1{
	  font-weight: normal;
	}
	.sou{
		color:red;
	}
	.header{
		width:100%;
		height:4rem;
		display: flex;
		position: fixed;
		top:0;
		left:0;
		align-items: center;
		background: red;
	}
	.bao{
		width:90%;
		height:2.5rem;
		background: #fff;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
	}
	.bao span{
		margin-left: 3%;
	}
	.bao input{
		height:26px;
		border: none;
		outline:none;
		font-size: 1.1rem;
	}
	.tong{
		width:100%;
		height:60rem;
		background: #fff;
		display: flex;
		justify-content: space-between;
	}
	.left{
		width:23%;
		height:70rem;
		position: fixed;
		top:4rem;
		left:0;
		background: #eee;
	}
	.left p{
		line-height: 4rem;
		height:4rem;
		border-bottom:1px solid #ccc;
		font-size: 1.1rem;
		background: #eee;
		color:#000;
		margin: 0;
		box-sizing: border-box;
	}
	.left p:nth-child(1){
		background: #fff;
		color:red;
	}
	.chaid{
		text-align: center;
	}
	.tiao{
		width:6%;
		height:2.8rem;
		background: red;
		position: absolute;
		left:0;
		top:0.6rem;
	}
	.right{
		width:77%;
	}
	.div1{
		width:100%;
		background: #fff;
		margin-left: 30%;
		margin-top: 4rem;
		display: flex;
		justify-content:flex-start;
		flex-wrap: wrap;
	}
	.div1 dl{
		width:30%;
		margin-left: 2%;
		margin-top: 5%;
	}
	.div1 dt{
		width:100%;
		text-align: center;
	}
	.div1 dt img{
		width:80%;
	}
	.div1 dd{
		width:100%;
		font-size: 1.1rem;
		margin-top: 8%;
		color:#000;
		text-align: center;
	}
</style>
